<template>
	<view>
		<view class="top">
			<image
				src="https://gulimall-void.oss-cn-guangzhou.aliyuncs.com/icon/point2.png">
			</image>
			<text class="points">{{points}}</text>
			<view class="btn" @click="myDiscountHandle" v-if="isShopShow">我的折扣</view>
			<view class="btn" @click="shopHandle" v-else>积分商城</view>
		</view>
		<Discount v-for="item in pointGoods" :key="item.id" :item="item" :isShopShow="isShopShow"
			@getUserPoints="getUserPoints"></Discount>
	</view>
</template>

<script>
	import Discount from '@/components/Shop/Discount.vue'
	export default {
		components: {
			Discount
		},
		data() {
			return {
				points: 0,
				pointGoods: [],
				isShopShow: true
			}
		},
		onShow() {
			this.getUserPoints()
			if (this.isShopShow) {
				this.getDiscountList()
			} else {
				this.getUserDiscount()
			}
		},
		methods: {
			//获取用户积分
			async getUserPoints() {
				const res = await this.$myRequest({
					url: 'user/pointsRecord/getUserPoints'
				})
				this.points = res.data
			},
			//获取折扣卷列表
			async getDiscountList() {
				const res = await this.$myRequest({
					url: 'shop/pointGoods/list'
				})
				if (res && res.code === 0) {
					this.pointGoods = res.page.list
				}
			},
			//获取用户折扣卷
			async getUserDiscount() {
				const res = await this.$myRequest({
					url: `shop/applet/getUserDiscount`,
				})
				if (res && res.code === 0) {
					this.pointGoods = res.data
				}
			},
			myDiscountHandle() {
				this.pointGoods = []
				//获取用户的折扣卷
				this.getUserDiscount();
				this.$nextTick(() => {
					this.isShopShow = false;
				})
			},
			shopHandle() {
				this.pointGoods = []
				this.getDiscountList()
				this.$nextTick(() => {
					this.isShopShow = true;
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F2EEE5;
	}

	.top {
		display: flex;
		height: 80rpx;
		margin: 10rpx;
		border-bottom: 1rpx #A6A6A6 solid;
		

		image {
			margin-top: 10rpx;
			width: 55rpx;
			height: 55rpx;
		}

		text {
			margin-left: 10rpx;
			color: #FFB300;
			display: block;
			height: 80rpx;
			line-height: 80rpx;
		}

		.btn {
			font-size: 30rpx;
			background-color: #FFB300;
			color: white;
			position: fixed;
			right: 20rpx;
			height: 70rpx;
			width: 150rpx;
			line-height: 70rpx;
			border-radius: 7px;
			text-align: center;
		}
	}

	.goods {
		display: flex;

		.goodsImg {
			margin: 15rpx 30rpx 15rpx 15rpx;
			border-radius: 10px;
			width: 200rpx;
			height: 200rpx;
		}

		.center {
			width: 350rpx;

			.goodsName {
				font-size: 38rpx;
				height: 150rpx;
				color: #8C7852;
			}

			.price {
				font-size: 43rpx;
				color: #FF5733;
			}
		}

		.right {
			position: fixed;
			right: 20rpx;

			.points {
				font-size: 30rpx;
				color: #FF8300;
				height: 150rpx;
			}

			.buyBtn {
				font-size: 35rpx;
				width: 150rpx;
				height: 70rpx;
				border-radius: 5px;
				color: white;
				background-color: #FFB300;
				line-height: 70rpx;
			}

			.number {
				font-size: 60rpx;
				color: #FF8300;
				height: 150rpx;
			}

			.useBtn {
				font-size: 35rpx;
				width: 150rpx;
				height: 70rpx;
				border-radius: 5px;
				color: white;
				background-color: #FFB300;
				line-height: 70rpx;
				text-align: center;
			}
		}

		border-bottom: 1rpx solid #A6A6A6;
	}
</style>
